<template>
  <div class="app-container" style="height:100%">
    <!-- 操作按钮--样式待美化 -->
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单数据 -->
    <h4 class="form-header h4">文章信息</h4>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      style="padding: 10px;overflow-y: auto;"
      label-width="100"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="form.title" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="一级标题2" prop="plateName">
            <el-input v-model="form.plateName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级标题" prop="partitionName">
            <el-input v-model="form.partitionName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布地址" prop="code">
            <el-input v-model="form.address" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="点赞数量" prop="code">
            <el-input v-model="form.likeNum" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收藏数量" prop="code">
            <el-input v-model="form.collectNum" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="评论数量" prop="code">
            <el-input v-model="form.commentNum" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布时间" prop="code">
            <el-input v-model="form.publishTime" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" height="500">
          <el-form-item label="" prop="content">
            <editor v-model="form.content" :height="500" disabled></editor>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文章状态" prop="code">
            <el-select v-model="form.status" placeholder="请选择状态" clearable :style="{width: '100%'}">
              <!-- 绑定下拉框值， -->
              <el-option v-for="dict in dict.type.pcj_article_status" :key="dict.value" :label="dict.label"
                         :value="dict.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="center">
          <el-form-item label="驳回原因" prop="code">
            <el-input v-model="form.rejectReason"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="下架原因" prop="code">
            <el-input v-model="form.pulledReason"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="code">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  // 引入对应的请求
  import {addArticle, getArticle, updateArticle} from "@/api/pcj/article";

  export default {
    dicts: ["pcj_article_status"],
    //当前页面的名称，需要自己定义
    name: "pcjArticleInfo",
    //存放引入其他页面的组件名称
    components: {},
    //接受父组件传递的值
    props: {},
    data() {
      return {
        // 表单数据
        form: {},
        // 表单验证规则
        rules: {},
        //存放列表传递的参数
        queryParams: {},
        //opt：edit-编辑，add-新增
        opt: "",
      };
    },
    mounted() {
      //获取列表路由过来的入参
      this.opt = this.$route.query.opt;
      //所有页面的初始化操作全部在这方法
      this.initData();
    },
    watch: {},
    methods: {
      //一些数据的初始化方法在这里调用
      initData() {
        //初始化表单信息
        this.initFormData(this.opt);
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          delFlag: 0,
          createId: null,
          createBy: null,
          createTime: null,
          updateId: null,
          updateBy: null,
          updateTime: null,
          userId: null,
          plateName: null,
          partitionName: null,
          address: null,
          likeNum: null,
          collectNum: null,
          publishTime: null,
          commentNum: null,
          content: null,
          status: null,
          rejectReason: null,
          pulledReason: null,
          remark: null,
        };
        this.pcjChatGroupUserList = [];
      },
      /**
       * 初始化表单方法在这写
       * @param id 单据id
       * @param opt edit-编辑，add-新增
       */
      initFormData(opt) {
        //如果是编辑，初始化信息
        if ("edit" == opt) {
          let id = this.$route.query.id;
          getArticle(id).then(response => {
            this.form = response.data;
          });
        }
        //新增
        else {
          this.reset();
        }
      },
      //提交单据
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.pcjChatGroupUserList = this.pcjChatGroupUserList;
            if (this.form.id != null) {
              updateArticle(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addArticle(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      //关闭弹窗，回到列表页面
      close() {
        //参数：path=在view目录下需要回到页面的路径，name为回到页面的组件name值
        const obj = { path: "/pcj/pcjTbModule/article" };
        this.$tab.closeOpenPage(obj);
      }
    }
  };
</script>

<style scoped>
</style>
